@include('Home.head')

<style>
	.head-style{
		background-color: #FFFFFF;
	}
	.p3{
		font-family: "Lucida Console";
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.imageh{
		height: 180px;
		width: 100%;
		border-radius: 15px 15px 0px 0px;
	}

	.goodlist{
		border-radius: 12px;
		height: auto;
		border: #FFFFFF 2px solid;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.textc{
		/* text-align: center; */
	}
	.headera{
		/* border-bottom:#F2F2F2 2px solid; */
		background-color: black;
	}
	.op{
		text-decoration:line-through;
		color: gray;
		font-weight: 600;
		margin-top: 7px;
		padding-left: 0px;
		font-size: 12px;
		padding-right: 25px;
		border: none;
		margin-top: -4px;
	}
	.goods_class{
		width: 24%;
		display: inline-block;
		padding: 0px 20px;
		margin: 8px -1px;
	}
	.el-input__inner{
		border-radius: 20px 0px 0px 20px;
	}

	.el-input-group__append{
		border-radius: 0px 20px 20px 0px;
	}
	.goods_class{
		width: 24%;
		display: inline-block;
		padding: 0px 18px;
		margin: 8px 0px;
	}
	input::-webkit-input-placeholder{
		text-align: center;
	}
	.el-carousel__container{
		height: 150px;
	}
	.goods_class1{
		width: 24%;
		display: inline-block;
		padding: 0px 20px;
		margin: 0px 2px;
	}
	.sxy-footer .am-navbar-nav{
		background-color: #fff;
		box-shadow: 0 1px 4px 0 rgba(34,31,31,.2);
	}
	/* .product-buyer-name {

	width: 120px;

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

	} */
	.right-list-buy{
		background: #d2393b;
		color: #ffffff;
		width: 40%;
		height: 25px;
		line-height: 25px;
		border-radius: 15px;
		text-align: center;
	}
</style>

<body>

<div class="container" id="app">
	<header data-am-widget="header" class="am-header am-header-default" style="border-bottom:#F2F2F2 2px solid;background-color: white;">
		<div class="am-header-left am-header-nav">
			<a  onclick="javascript:history.back(-1);" class="">
				<i style="font-weight: 500;font-size: 18px;font-style:normal; color: black">返回</i>
			</a>
		</div>
		<h1 class="am-header-title">
			<a href="#title-link" class="" style="color: rgb(255,215,0);font-weight: 600;">@{{title}}</a>
		</h1>
	</header>
	<div style="margin: 10px;">
		<el-input v-model="keyword"  placeholder="请输入搜索关键字">
			<el-button slot="append" icon="am-icon-search" v-on:click="search()"></el-button>
		</el-input>
	</div>
	<!-- banner -->

	<div class="am-cf am-g">

		<ul class="am-avg-sm-2 my-shop-product-list">

			<li v-for="val in goodsList">

				<div class="am-panel am-panel-default goodlist"   v-on:click="jump(val.id)">

					<div class="am-panel-bd">

						<img class="am-img-responsive imageh" :src="val.goods_thumb" />

						<h3 class="p3 product-buyer-name"><a href="#" style="font-weight: 600;">@{{ val.goodsname }}</a></h3>

						<div>

							<span class="list-product-price-span2" style="font-size: 16px;padding-left: 0px;border: none;">￥@{{ val.rulingprice }}</span>
							<span class="list-product-price-span2" style="color: grey;font-size: 13px;padding-left: 10px;border: none;text-decoration: line-through">原价@{{ val.originalprice }}</span>
							 <span class="right-list-buy" style="font-weight: 600;float: right;">立即购买</span>


						</div>

						<hr data-am-widget="divider" class="am-divider am-divider-default am-cf" style="background-color: #F2F2F2;width: 1px;"/>

						<div>
							<!-- <span class="list-product-price-span2 op">￥@{{ val.originalprice }}</span> -->
						</div>

						<ol class="am-avg-sm-2 product-list-share">

							{{--<li class="am-text-sm">积分：200</li>--}}

							{{--<li><button class="am-btn am-btn-danger am-btn-xs index-addcart-btn">立即购买</button></li>--}}

						</ol>

					</div>

				</div>

			</li>

		</ul>

	</div>
	<li class="layui-flow-more" v-if="loading">加载中</li>
	<li class="layui-flow-more" v-if="loading==false">没有更多了</li>
	@include('Home.foot')

</div>

</body>

<script>

	var app = new Vue({

		el:"#app",

		data: {

			img1:'',
			title:'',
			goodsList : [],
			goods:[],
			goods1:[],
			imagelist:[],
			rotation:[],
			keyword:'',
			classify:{},
			page: '', //总页数
			nowPage: 2, //本页
			loading: false, //异步加载时的限制
			bottomHight: 50, //滚动条到某个位置才触发时间
			val:0
		},

		//事件

		methods: {

			{{--classify1:function () {--}}

			{{--	//获取商品数据--}}

			{{--	$.post("/home/index/index_classify",{'_token':'{{csrf_token()}}',class:'select'},function (res) {--}}

			{{--		if(res.code == 1){--}}
			{{--			app.classify = res.data;--}}
			{{--			console.log(app.classify)--}}
			{{--		} else if(res.code == 0) {--}}
			{{--			layer.msg(res.data,{icon:7});--}}
			{{--		}--}}

			{{--	});--}}

			{{--},--}}
			initialize:function () {

				//获取商品数据
				var class1 = this.obtain('class');
				var cid = this.obtain('cid');
				$.post("/home/index/sort_goods ",{'_token':'{{csrf_token()}}',cid:cid},function (res) {

					if(res.code == 1){
						console.log(res.data)
						app.goodsList = res.data;
						if(cid == 7){
							app.img1 = 'http://qiniu.baoliy168.com/%E7%BB%84%207%20%E2%80%93%202%403x.png';
							app.title = '特价专区';
						}else if(cid == 54){
							app.img1 = 'http://qiniu.baoliy168.com/%E7%BB%84%E4%BB%B6%207%20%E2%80%93%201%40.png';
							app.title = '爆品专区';
						}else if(cid == 55){
							app.img1 = 'http://qiniu.baoliy168.com/%E7%BB%84%E4%BB%B6%207%20%E2%80%93%201%40.png';
							app.title = '品牌专区';
						}else if(class1 == 'is_source'){
							app.title = '源头厂家';
						}
					} else {
						layer.msg(res.data,{icon:7});
						if(cid == 7){
							app.title = '特价专区';
						}else if(cid == 54){
							app.title = '爆品专区';
						}else if(cid == 55){
							app.title = '品牌专区';
						}else if(class1 == 'is_source'){
							app.title = '源头厂家';
						}

					}

				});

				{{--$.post("/home/index/resale", {'_token': '{{csrf_token()}}',class:'select',two_tid:0}, function (res) {--}}
				{{--	// console.log(res)--}}
				{{--	if (res.code == 1) {--}}
				{{--		app.goods = res.data;--}}
				{{--	} else {--}}
				{{--		layer.msg(res.data,{icon:7});--}}
				{{--	}--}}
				{{--});--}}
				{{--$.post("/home/index/newborn", {'_token': '{{csrf_token()}}',class:'select',two_tid:0}, function (res) {--}}
				{{--	// console.log(res)--}}
				{{--	if (res.code == 1) {--}}
				{{--		app.goods1 = res.data;--}}
				{{--	} else {--}}
				{{--		layer.msg(res.data,{icon:7});--}}
				{{--	}--}}
				{{--});--}}

			},

			handleScroll: function () {
				var rico = this
				// console.log(app.type);
				if (getScrollBottomHeight() <= app.bottomHight && app.nowPage < app.page && app.loading ==
						false) {
					app.loading = true;
					$.get("/home/index/classify", {
						'_token': '{{csrf_token()}}',
						class: 'find',
						page: app.nowPage + 1,
						cid:app.val
					}, function (res) {
						for (var i = 0; i < res.data.data.length; i++) {
							// console.log(res.data.data[i])

							app.goodsList.push(res.data.data[i]);
						}
						app.nowPage++;
						app.loading = false;
					});
				}
			},

			search:function(){
				//获取商品数据
				var id = this.obtain('cid');
				$.post("/home/index/search",{'_token':'{{csrf_token()}}',class:'select',keyword:app.keyword,cid:id},function (res) {

					if(res.code == 1){
						app.goodsList = res.data.data

						if (res.data.length > 3) {
							for (var i = 0; i < 3; i++) {
								var datas = {
									goods_thumb: '',
									gid: 0
								};
								datas.goods_thumb = app.goodsList[i].goods_thumb;
								datas.gid = app.goodsList[0].id;
								app.rotation.push(datas);
							}
						}else{
							for (var i = 0; i < res.data.length; i++) {
								var datas = {
									goods_thumb: '',
									gid: 0
								};
								datas.goods_thumb = app.goodsList[i].goods_thumb;
								datas.gid = app.goodsList[0].id;
								app.rotation.push(datas);
							}
						}

					} else {

						layer.msg(res.data,{icon:7});

					}

				});

			},

			//跳转
			classGood:function(val){
				$.post("/home/index/getShopGoods",{'_token':'{{csrf_token()}}',id:val},function (res) {
					if(res.code == 1){
						app.goodsList = res.data;
					} else if(res.code == 0) {
						layer.msg(res.data,{icon:7});
					}

				});

			}
			,
			classGood1:function(val){
				// $.post("/home/index/classify",{'_token':'{{csrf_token()}}',class:'find',cid:val},function (res) {
				//     if(res.code == 1){
				// 		app.goodsList = res.data.data;
				// 		app.page = res.data.last_page;
				// 		app.nowPage = res.data.current_page;
				// 		app.val = val;
				//     } else if(res.code == 0) {
				//         layer.msg(res.data,{icon:7});
				//     }

				// });
				window.location.href="http://hb.baoliy168.com/shop/index/case"
			}
			,
			jump:function (id) {

				window.location.href="/home/microShop/productmicro?id="+id;
				// window.location.href="/home/microShop/index"
			},
			jump1:function () {

				//window.location.href="/home/excellent/product?id="+id;
				window.location.href="/home/microShop/index"
			},

			//获取url id

			obtain:function (val) {

				var query = window.location.search.substring(1);

				var vars = query.split("&");

				for (var i=0;i<vars.length;i++) {

					var pair = vars[i].split("=");

					if(pair[0] == val){

						return pair[1];

					}

				}

			},

		},

		//自动执行

		mounted: function () {

			this.initialize();
			this.classify1();

		},

	})

	//添加滚动事件
	window.onload = function () {
		window.addEventListener('scroll', app.handleScroll)
	}
	//滚动条到底部的距离
	function getScrollBottomHeight() {
		return getPageHeight() - getScrollTop() - getWindowHeight();

	}
	//页面高度
	function getPageHeight() {
		return document.querySelector("html").scrollHeight
	}
	//滚动条顶 高度
	function getScrollTop() {
		var scrollTop = 0,
				bodyScrollTop = 0,
				documentScrollTop = 0;
		if (document.body) {
			bodyScrollTop = document.body.scrollTop;
		}
		if (document.documentElement) {
			documentScrollTop = document.documentElement.scrollTop;
		}
		scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
		return scrollTop;
	}

	function getWindowHeight() {
		var windowHeight = 0;
		if (document.compatMode == "CSS1Compat") {
			windowHeight = document.documentElement.clientHeight;
		} else {
			windowHeight = document.body.clientHeight;
		}
		return windowHeight;
	}

</script>

</html>

